import React, { Component } from 'react'

export default class App extends Component {

    state = {
        flag: false
    }

  render() {

    // 如果模板内容差异过大，可以直接通过条件切换整套模板
    // if(this.state.flag){
    //     return (
    //         <div>App 为真</div>
    //       )
    // }else {
    //     return (
    //         <div>App 为假</div>
    //       )
    // }
    // jsx 不太推荐使用 if 和 else 语句

    return (<>

        <div>App</div>

        
        {/* 通过三目运算进行配置条件渲染 */}
        {this.state.flag ? '为真' : '为假'}

        {/* 当为真的时候就显示后面的内容 */}
        {this.state.flag && <h1>为真：锄禾日当午</h1>}
        
        {/* 当为假的时候就显示后面的内容 */}
        {this.state.flag || <h1>为假：汗滴禾下土</h1>}
        {/* | 位运算 */}
        <button onClick={()=>{
            this.setState({
                flag: !this.state.flag
            })
        }}>切换</button>
    </>)

    
  }
}
